<template>
  <div class="pagebox app-container">
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box bg" style="padding-bottom: 72px">
          <div class="topoptions">
            <span class="colorin">个数排序</span>
            <a-select
              :default-value="1"
              style="width: 120px"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              @change="handleChange"
            >
              <a-select-option
                :value="item.value"
                v-for="(item, index) in numlisttwo"
                :key="index"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </div>
          <barChartSort :chart-data="chartDataBarsort" :height="'600px'" />
          <div class="btnbox">
            <ExportFile
              :fetch="getDownloadData"
              :fields="jsonnumFields"
              name="报警数量.xls"
            >
              <a-button type="primary" :loading="iconLoading"> 导出 </a-button>
            </ExportFile>
          </div>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="12">
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="24">
            <div class="gutter-box bg">
              <div class="topoptions">
                <span class="colorin">报警统计</span>
                <a-tree-select
                  @change="handlealarmChange"
                  v-model="defultcompid"
                  style="width: 220px; font-size: 14px; font-weight: normal"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  placeholder="公司"
                  allow-clear
                  tree-default-expand-all
                >
                  <a-tree-select-node
                    :key="item.macfacid"
                    :value="item.macfacid"
                    :title="item.macfacName"
                    v-for="item in macfacData"
                  >
                    <a-tree-select-node
                      :key="com.compid"
                      :value="com.compid"
                      :title="com.name"
                      v-for="com in item.company"
                    />
                  </a-tree-select-node>
                </a-tree-select>
                <!-- <a-select  :getPopupContainer="(triggerNode) => triggerNode.parentNode"  style="width: 120px" @change="handlealarmChange" v-model="timeParames.companyId">
                  <a-select-option :value="item.macfacid" v-for="(item,index) in macfacData" :key="item.macfacid">
                    {{ item.macfacName }}
                  </a-select-option>
                </a-select> -->
              </div>
              <pieCharts
                v-if="pieData.length > 0"
                :chartData="pieData"
                :chartColor="colorList"
                :height="'280px'"
              />
            </div>
          </a-col>
          <a-col class="gutter-row" :span="24" style="margin-top: 20px">
            <div class="gutter-box bg">
              <div class="topoptions">
                <span class="colorin">故障时间</span>
              </div>
              <linechart :chart-data="chartData" :height="'374px'"></linechart>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import barChartSort from "@/pages/echartsCom/barChartSort";
import linechart from "@/pages/echartsCom/linechart.vue";
import pieCharts from "@/pages/echartsCom/pieCharts.vue";
import api from "@/api/statisticalForm.js";
import wapi from "@/api/workshop";
let colorList = ["#FF3535", "#FF7865", "#FFBB00", "#f8d77e"];
import {
  timeCalculation,
  formatCurrentMonth,
  getDayAll,
  getYearAndMonth,
} from "@/unit/tool";
import eapi from "@/api/equipment.js";
export default {
  name: "index",
  components: {
    barChartSort,
    linechart,
    pieCharts,
  },
  data() {
    return {
      chartDataBarsort: {
        expectedData: [],
        data: [],
        color: "#2297F0",
      },
      chartDataBarsort2: {
        expectedData: [],
        color: "#F9C83F",
      },
      numList: [
        { name: "1-10", value: 1 },
        { name: "11-20", value: 2 },
        { name: "21-30", value: 3 },
        { name: "31-40", value: 4 },
        { name: "41-50", value: 5 },
        { name: "51-60", value: 6 },
        { name: "61-70", value: 7 },
      ],
      tabListNoTitle: [
        { key: "1", tab: "开机率" },
        { key: "2", tab: "运行时间" },
        { key: "3", tab: "故障时间" },
      ],
      noTitleKey: "1",
      chartData: {
        expectedData: [],
        date: [],
        lenged: "center",
        name: ["故障时间百分比"],
      },
      pieData: [
        { value: "0", name: "一级报警" },
        { value: "0", name: "二级报警" },
        { value: "0", name: "三级报警" },
        {
          value: "0",
          name: "系统提示信息",
        },
      ],
      colorList: colorList,
      timeParames: {
        page: 1,
        pageSize: 10,
      },
      rows: [],
      alarmData: [],
      timeData: [],
      macfacData: [],
      compid: "",
      jsonnumFields: { 公司名称: "companyName", 时间: "sum" },
      iconLoading: false,
      total: 0,
      defultcompid: "",
      numlisttwo:[]
    };
  },
  created() {
    this.timeParames.username = localStorage.getItem("userName");
    this.timeParames.companyId = this.compid = localStorage.getItem("compid");
    this.timeParames.startTime = timeCalculation(new Date(), "subtract", 7);
    this.timeParames.endTime = timeCalculation(new Date(), "subtract", 1);
    this.CompanyList();
    this.MacAlarmRankByCompId();
  },
  methods: {
    CompanyList() {
      eapi.CompanyList({ Username: localStorage.getItem("userName") }).then((res) => {
          this.macfacData = res.Data;
          let compid = this.defultcompid = this.macfacData[0].company[0].compid;
          this.MacAlarmStatisticByCompId(compid);
          this.CompanyAlarmTime(compid);
        });
    },
    handlealarmChange(val) {
      this.MacAlarmStatisticByCompId(val);
      this.CompanyAlarmTime(val);
    },
     numLISTsum(num){
        let list=[]
        for(var i=1;i<=num; i++){
          list.push({name:`${(10*(i-1))+1}-${(10*(i-1))+10}`,value:i})
        }
        return list
    },
    //报警排名
    MacAlarmRankByCompId() {
      api.MacAlarmRankByCompId(this.timeParames).then((res) => {
        let rows = res.Data.rows;
        this.total = res.Data.total;
         let num=Math.ceil( this.total/10);
           this.numlisttwo=this.numLISTsum(num);
        let expectedData = [];
        let data = [];
        // this.rows为测试数据
        rows.forEach((item) => {
          expectedData.push(item.sum);
          data.push(item.companyName);
        });
        this.chartDataBarsort.expectedData = expectedData;
        this.chartDataBarsort.data = data;
      });
    },
    //故障时间
    CompanyAlarmTime(id) {
      let params = {
        compId: id,
        startTime: this.timeParames.startTime,
        endTime: this.timeParames.endTime,
      };
      api.CompanyAlarmTime(params).then((res) => {
        let rows = res.Data;
        let expectedData = [];
        // this.rows为测试数据
        let dates = [];
        dates = getDayAll(this.timeParames.startTime, this.timeParames.endTime);
        dates.forEach((items) => {
          let opt = rows.find((day) => day.time == items); //每天
          if (opt) {
            expectedData.push((opt.sum * 100).toFixed(2));
          } else {
            expectedData.push(0);
          }
        });
        this.chartData.expectedData = [];
        this.chartData.date = [];
        this.chartData.expectedData.push(expectedData);
        this.chartData.date = dates;
      });
    },
    //报警百分比
    MacAlarmStatisticByCompId(compId) {
      let params = {
        compId: compId,
        startTime: this.timeParames.startTime,
        endTime: this.timeParames.endTime,
      };
      wapi.MacAlarmStatisticByCompId(params).then((res) => {
        let alarmData = res.Data;
        let data = [
          { value: "0", name: "一级报警" },
          { value: "0", name: "二级报警" },
          { value: "0", name: "三级报警" },
          {
            value: "0",
            name: "系统提示信息",
          },
        ];
        alarmData.forEach((item, index) => {
          if (item.alarmType == 1) {
            data[0].value = (item.rate * 100).toFixed(2);
          } else if (item.alarmType == 2) {
            data[1].value = (item.rate * 100).toFixed(2);
          } else if (item.alarmType == 3) {
            data[2].value = (item.rate * 100).toFixed(2);
          } else if (item.alarmType == 4) {
            data[3].value = (item.rate * 100).toFixed(2);
          }
        });
        this.pieData = data;
      });
    },
    onTabChange(key, type) {
      this[type] = key;
    },
    handleChange(value) {
      this.timeParames.page = value;
      this.MacAlarmRankByCompId();
    },

    // 获取需要导出的数据
    async getDownloadData() {
      let _this = this;
      console.log(_this.iconLoading);
      if (_this.iconLoading == true) {
        return false;
      }
      let total = _this.total;
      let pageSize = 300;
      let length = Math.ceil(total / pageSize);
      let newLists = [];
      _this.iconLoading = true;
      for (let i = 1; i <= length; i++) {
        let lists = await this.buildDownloadLists({
          pageNum: i,
          pageSize: pageSize,
        });
        newLists.push(lists);
      }
      _this.iconLoading = false;
      return [].concat(...newLists);
    },

    async buildDownloadLists(parames) {
      let _this = this;
      let { pageNum, pageSize } = parames;
      (_this.timeParames.pageSize = pageSize),
        (_this.timeParames.page = pageNum);
      const res = await api.MacAlarmRankByCompId({
        ..._this.timeParames,
      });

      if (res.MsgCode !== 0) {
        return;
      }
      return res.Data.rows;
    },
  },
};
</script>

<style scoped lang="less">
@import "index";
</style>
